<template>
  <div class="header">
    <!-- 顶部个人 详情 -->
    <div class="top">
      <div class="headportrait">
        <img src="../../assets/image/reg2-photo.png" alt="" />
      </div>
      <div class="text">
        <p class="name">Hi,{{ phone }}</p>
        <p class="studyday">今天是你学习的第1天</p>
      </div>
      <div class="Like">
        <i>
          <img src="../../assets/image/zuanshi.png" alt="" />
          <span>{{ myMoney }}</span>
        </i>
        <i>
          <img src="../../assets/image/dianzan.png" alt="" />
          <span>0</span>
        </i>
      </div>
    </div>
    <!-- 共学习 -->

    <div class="nav">
      <img class="left-img" src="../../assets/image/矩形3.png" alt="" />
      <img class="right-img" src="../../assets/image/矩形4.png" alt="" />
      <p>
        <i>共学习课次</i>
        <i>
          <span>4</span>
          <em>次</em>
        </i>
      </p>
      <p>
        <i>共学习单词</i>
        <i>
          <span>0</span>
          <em>次</em>
        </i>
      </p>
      <p>
        <i>共获得MVP</i>
        <i>
          <span>0</span>
          <em>次</em>
        </i>
      </p>
    </div>
    <!-- 我的成就 -->
    <div class="main">
      <div class="wrapper">
        <p class="cjtext1">
          <img src="../../assets/image/xingbiao.png" alt="" />
          <span>我的成就</span>
          <em class="Pl-details" @click="todoip"><van-icon name="arrow" /></em>
        </p>

        <!-- 成就宫格 -->
        <div class="cehngjiu">
          <div class="onecj" v-for="(item, index) in list" :key="index">
            <img :src="require('../../assets/image/' + item.src)" alt="" />
            <p class="cjtext">{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <router-view />
</template>

<script>
import { ref, onMounted } from "vue";
import { getAchievementApi, getMyInfoApi } from "../../utils/api";
//import { useStore } from 'vuex'
export default {
  setup() {
    const list = ref([]);
    const cout = ref(5);
    const src = ref();
    const myMoney = ref();
    const phone = ref();
    // const store = useStore()

    //const token = computed(() => {});
    onMounted(async () => {
      const token = localStorage.getItem("token");

      const res = await getAchievementApi({ token });

      if (res.status === 0) {
        list.value = res.results.map(ele => {
          ele.src = ele.src.split("/").pop();
          return ele;
        });
        const ress = await getMyInfoApi({ token });

        if (res.status === 0) {
          myMoney.value = ress.results.myMoney;
          phone.value = ress.results.username || ress.results.phone;
        }
        //  src.value = '../../assets/'+ res.results.src.split("/").slice(-2).join('/')
      }
    });

    return {
      cout,
      list,
      src,
      myMoney,
      phone,
      //count: computed(() => store.state.count),
    };
  },
  methods: {
    todoip() {
      this.$router.push("/totoachievement");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 100%;
  width: 100%;
}
.wrapper {
  width: 90%;
  margin: auto;
}
.top {
  width: 100%;
  height: 200px;
  position: fixed;
  justify-content: space-around;
  z-index: -222;
  background: #41a0fe;
  display: flex;
  padding-top: 6%;
  .headportrait {
    margin-left: 6%;
    width: 61px;
    height: 61px;
    border-radius: 50%;
    background: rgb(115, 177, 235);
    border: 2px solid white;
  }
  .text {
    padding-top: 20px;
    margin-left: 4%;
    flex: 3;
    height: 63px;

    color: white;
    .name {
      font-size: 20px;
    }
    .studyday {
      margin-top: 7px;
      font-size: 12px;
    }
  }
  .Like {
    margin-top: 13px;
    display: flex;
    justify-content: space-around;
    margin-right: 6%;
    flex: 2.1;
    height: 55px;

    i {
      width: 44%;
      height: 80%;
      border-radius: 40%;
      background: #098ddf;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        width: 20px;
        height: 20px;
      }
      span {
        color: rgb(255, 255, 255);
        font-size: 16px;
        text-align: center;
      }
    }
  }
}
.nav {
  width: 90%;
  height: 100px;
  border-radius: 20px;
  box-shadow: 0px 0px 5px 3px rgb(190, 190, 190);
  position: fixed;
  top: 23%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  display: flex;
  align-items: center;
  .left-img {
    position: fixed;
    top: -20%;
    left: 30px;
    z-index: 3333;
    width: 18px;
    height: 40px;
  }
  .right-img {
    position: fixed;
    top: -20%;
    right: 30px;
    z-index: 3333;
    width: 18px;
    height: 40px;
  }
  p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 33%;
    i {
      margin-bottom: 5px;
      font-size: 12px;
      span {
        font: 900;
        font-size: 15px;
      }
      em {
        color: rgb(196, 196, 196);
      }
    }
  }
}
.main {
  padding-top: 80px;
  position: fixed;
  top: 28%;
  width: 100%;
  height: 80%;
  border-radius: 20px 20px 0 0;
  background: rgb(255, 255, 255);
  z-index: -2;
  .cjtext1 {
    padding-top: 5%;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    //background: green;
    .Pl-details {
      width: 24px;
      height: 24px;
      background: rgb(224, 224, 224);
      position: fixed;
      right: 10%;
      border-radius: 50%;
      text-align: center;
      .van-icon {
        display: block;
        margin: auto;
        color: rgb(99, 99, 99);
        font-weight: 900;
        font-size: 20px;
      }
    }
    img {
      width: 30px;
    }
    span {
      font-size: 22px;
      font-weight: 600;
    }
  }
  .cehngjiu {
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    .onecj {
      width: 25%;
    }
    img {
      width: 70px;
      height: 70px;
    }
    p {
      padding: 0;
      font: 700 15px/15px "";
    }
  }
}
</style>
